<template>
  <div class="goods">
    <div class="scroll-nav-wrapper">
      <cube-scroll-nav
        :side="true"
        :data="goods"
        :current="goods[0].name"
        :options="scrollOptions"
        v-if="goods.length"
      >
        <template v-slot:bar="props">
        <!-- <template slot="bar" slot-scope="props"> -->
          <cube-scroll-nav-bar
            direction="vertical"
            :current="props.current"
            :labels="props.labels"
            :txts="barTxtsCustom"
          >
            <template v-slot="props">
            <!-- <template slot-scope="props"> -->
              <div class="text">
                <support-ico
                  v-if="props.txt.type>=1"
                  :size=3
                  :type="props.txt.type"
                ></support-ico>
                <span>{{props.txt.name}}</span>
                <span class="num" v-if="props.txt.count>0"> 
                  <bubble :num="props.txt.count"></bubble>
                </span>
              </div>
            </template>
          </cube-scroll-nav-bar>
        </template>
        <cube-scroll-nav-panel
          v-for="(item, i) in goods"
          :key="i"
          :label="item.name"
          :title="item.name">
          <ul>
            <li v-for="food in item.foods" :key="food.name" class="food-item">
              <div class="icon">
                <img :src="food.icon" width="57" height="57">
              </div>
              <div class="content">
                <h2 class="name">{{ food.name }}</h2>
                <p class="desc">{{ food.description }}</p>
                <div class="extra">
                  <span class="count">月售{{ food.sellCount }}份</span><span>好评率{{ food.rating }}%</span>
                </div>
                <div class="price">
                  <span class="now">￥{{ food.price }}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice }}</span>
                </div>
                <div class="cart-control-wrapper">
                  <cart-control 
                    ref="food"
                    :food="food"
                    @add="onAdd"
                  ></cart-control>
                </div>
              </div>
            </li>
          </ul>
        </cube-scroll-nav-panel>
      </cube-scroll-nav>
    </div>
    <div class="shopping-cart-wrapper">
      <shop-cart 
        ref="shopCart"
        :delivery-price="data.seller.deliveryPrice"
        :min-price="data.seller.minPrice"
      ></shop-cart>
      <div class="ball-container">
        <transition
          @before-enter="beforeEnter"
          @enter="enter"
          @after-enter="afterEnter">
          <div 
            class="ball" 
            ref="ball"
            @add="onAdd"
            v-show="ballFlag"
          >
            <div class="inner" ref="innerBall"></div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
  import { getGoods } from 'api'
  import SupportIco from 'components/support-ico/support-ico'
  import ShopCart from 'components/shop-cart/shop-cart'
  import CartControl from 'components/cart-control/cart-control'
  import Bubble from 'components/bubble/bubble'
  
  export default {
    name: 'goods',
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        goods: [],
        ballFlag: false,
        scrollOptions: {
          click: false,
          directionLockThreshold: 0
        }
      }
    },
    computed: {
      barTxtsCustom() {
        let barTxts = []
        this.goods.forEach(good => {
          const { name, type, foods } = good
          let count = 0
          foods.forEach(food => {
            if (this.$store.getters.getFoodCount[food.name]) {
              food.count = this.$store.getters.getFoodCount[food.name]
              count += food.count || 0
            }
          }) 
          barTxts.push({
            name,
            type,
            count
          })
        })
        return barTxts
      }
    },
    methods: {
      fetch() {
        // 调用封装好的api，获取商品（goods）数据，该函数调用将在tab组件中的onChange中进行
        getGoods().then(result => {
          this.goods = result
          // console.log(this.goods[2].name)
          // this.$nextTick(() => {
          //   console.log(this.goods[2].name)
          // })
        })
      },
      onAdd(target) {
        this.buttonRect = target
        this.ballFlag = !this.ballFlag
        console.log(this.ballFlag)
      },
      beforeEnter(el) {
        const xButton = this.buttonRect.left - 32 - 12
        const yButton = -(window.innerHeight - this.buttonRect.top - 22)
        el.style.transform = `translate(0,${yButton}px)`

        const inner = this.$refs.innerBall
        inner.style.transform = `translate(${xButton}px, 0)`
      },
      enter(el, done) {
        /* eslint-disable no-unused-vars */
        el.offsetWidth
        // this._reflow = document.body.offsetHeight
        // 控制y轴动画
        el.style.transform = 'translate(0, 0)'
        // 控制x轴动画（线性）
        const inner = this.$refs.innerBall
        inner.style.transform = `translate(0, 0)`
        done()
        // el.addEventListener('transitionend', done)
      },
      afterEnter(el) {
        this.ballFlag = !this.ballFlag
      }
    },
    components: {
      SupportIco,
      ShopCart,
      CartControl,
      Bubble
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~common/stylus/mixin"
  @import "~common/stylus/variable"
  .goods
    position: relative
    height: 100%
    .scroll-nav-wrapper
      position: absolute
      top: 0
      left: 0
      width: 100%
      bottom: 48px
    >>> .cube-scroll-nav-bar
      width: 80px
      white-space: normal
      overflow: hidden      
    >>> .cube-scroll-nav-bar-item
      padding: 0 12px
      display: flex
      align-items: center
      text-align: left
      height: 54px
      font-size: $fontsize-small
      line-height: 14px
      background-color: $color-background-ssss
      // border-bottom: 1px solid $color-row-line 
      border-bottom-1px(12px, 56px, $color-row-line)
      .text
        flex: 1
        position: relative
      .num
        position: absolute
        right: -8px
        top: -10px
      .support-ico
        display: inline-block
        vertical-align: top
        margin-right: 4px

    >>> .cube-scroll-nav-bar-item_active
      border-none()
      background-color: $color-white
      font-weight: 700
      color: #000
      span 
        font-weight 700   
    >>> .cube-scroll-nav-panel-title
      padding-left: 14px
      height: 26px
      line-height: 26px
      border-left: 2px solid $color-col-line
      font-size: $fontsize-small
      color: $color-title-grey
      background: $color-background-ssss
    .food-item
      display flex
      margin 18px
      position: relative
      overflow hidden
      .icon
        flex 0 0 57px
        margin-right: 10px
        img
          height auto 
      .content
        flex 1
        .name
          margin: 2px 0 8px 0
          height: 14px
          line-height: 14px
          font-size: $fontsize-medium
          color: rgb(7, 17, 27)
        .desc, .extra
          line-height: 10px
          font-size: $fontsize-small-s
          color: rgb(147, 153, 159)
        .desc
          line-height: 12px
          margin-bottom: 8px
        .extra
          .count
            margin-right: 12px
        .price
          line-height: 24px
          .now
            font-weight: 700
            margin-right: 8px
            font-size: $fontsize-medium
            color: $color-red
          .old
            font-weight: 700
            text-decoration: line-through
            font-size: $fontsize-small-s
            color: $color-light-grey   
        .cart-control-wrapper
          position absolute
          bottom 0
          right 0
    .shopping-cart-wrapper
      position: absolute
      left: 0
      bottom: 0
      height: 48px
      width: 100%
      z-index: 50
    .ball-container
      .ball
        position: fixed
        left: 32px
        bottom: 22px
        z-index: 200
        transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
        .inner
          width: 16px
          height: 16px
          border-radius: 50%
          background: $color-blue
          transition: all 0.4s linear
        
</style>
